<template>
  <a-form
    :model="formState"
    ref="formRef"
  >
    <a-form-item
        label="测试"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-auto-complete
          v-model:value="formState.username"
          :filterOption="filterOption"
          :options="options"
          style="width: 200px"
      />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" @click="rest">重置</a-button>
      </a-form-item>
  </a-form>
</template>
<script setup>
  import { ref } from 'vue'
  const formRef = ref()
  const formState = ref({})
  const options = ref([
    {
      label: '张三',
      value: '张三'
    },
    {
      label: '李四',
      value: '李四'
    }
  ])
  const rest = () => {
    formRef.value.resetFields()
    // formState.value = {}
  }
  const filterOption = (inputValue, option) => {
    return option.label.includes(inputValue)
  }
</script>
<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
